<template>
  <div>
    <el-row>
      <el-col :span="8" style="margin-top: 50px">
        <div class="grid-content bg-purple">
          <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px"
                   class="demo-ruleForm">
            <el-form-item label="车牌号" prop="carnumber">
              <el-input type="text" v-model="ruleForm.carnumber" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="车座位" prop="carseat">
              <el-input type="text" v-model="ruleForm.carseat" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="车辆类型" prop="cartype">
              <el-input v-model.number="ruleForm.cartype"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
              <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
          </el-form>

        </div>
      </el-col>
      <el-col :span="14" :offset="2">
        <div class="grid-content bg-purple-light">
          <template>
            <el-table
              height="420"
              :data="tableData"
              style="width: 100%;margin-top: 30px">
              <el-table-column
                prop="carnumber"
                label="车牌号"
                width="140">
              </el-table-column>
              <el-table-column
                prop="carseat"
                label="座位"
                width="120">
              </el-table-column>
              <el-table-column
                prop="cartype"
                label="车辆类型">
              </el-table-column>
              <el-table-column
                label="操作"
                width="120"
              >
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    @click="handleEdit(scope.$index, scope.row)">修改
                  </el-button>
                  <br>
                  <br>
                  <el-button
                    size="mini"
                    type="danger"
                    @click="handleDelete(scope.$index, scope.row)">删除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </template>
          <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
            <el-form :model="form">
              <el-form-item label="车牌号" :label-width="formLabelWidth">
                <el-input v-model="form.carnumber" autocomplete="off" disabled></el-input>
              </el-form-item>
              <el-form-item label="车座数" :label-width="formLabelWidth">
                <el-input v-model="form.carseat" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="车辆类型" :label-width="formLabelWidth">
                <el-input v-model="form.cartype" autocomplete="off"></el-input>
              </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisible = false">取 消</el-button>
              <el-button type="primary" @click="submitEdit">确 定</el-button>
            </div>
          </el-dialog>
        </div>
        <div class="pagenation">
          <el-pagination
            small
            layout="prev, pager, next"
            :total="total"
            :page-size="page_size"
            @prev-click="prevfun"
            @next-click="nextfun"
            @current-change="currentchange"
          >
          </el-pagination>
        </div>
        <el-dialog
          title="提示"
          :visible.sync="dialogVisible"
          width="30%"
        >
          <span style="color: red">确定永久删除此数据吗??</span>
          <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="delete_car">确 定</el-button>
  </span>
        </el-dialog>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  export default {
    name: 'CreateCarView',
    data () {
      var checkNumber = (rule, value, callback) => {
        if (value === '') {
          return callback(new Error('车牌不能为空'))
        }
        callback()
      }
      var checkSeat = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('车是几座的不能为空?'))
        }
        callback()

      }
      var checkType = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('车的类型不能为空'))
        }
        callback()

      }
      return {
        current_page:'',
        delete_id: '',
        dialogVisible: false,
        //对话框中的form表单
        dialogFormVisible: false,
        //label的长度
        formLabelWidth: '120px',
        //修改车辆的信息
        form: {},
        //展示到前端的车辆的数据
        tableData: [],
        total: 5, //先设置给初始值，只给空字符串''会报typeerror
        page_size: 1,//先设置给初始值，只给空字符串''会报typeerror
        ruleForm: {
          carnumber: '',//车牌
          carseat: '',//几座
          cartype: ''//车辆类型
        },
        rules: {
          carnumber: [
            {
              validator: checkNumber,
              trigger: 'blur'
            }
          ],
          carseat: [
            {
              validator: checkSeat,
              trigger: 'blur'
            }
          ],
          cartype: [
            {
              validator: checkType,
              trigger: 'blur'
            }
          ]
        }
      }
    },
    mounted () {
      this.get_evection()
    },
    methods: {
      //创建车辆的函数
      submitForm (formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$axios({
              url: this.$settings.base_url + '/user/createcar/',
              method: 'post',
              data: this.ruleForm
            }).then(res => {
              if (res.data.code === 100) {
                this.get_evection()
                this.$message.success('创建成功')
                this.ruleForm = {
                  carnumber: '',//车牌
                  carseat: '',//几座
                  cartype: ''//车辆类型
                }
              } else {
                this.$message.error('创建失败')
              }
            })

          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
      //修改车辆
      handleEdit (index, row) {
        this.dialogFormVisible = true
        this.form = row
      },
      submitEdit () {
        var id = this.form.id
        delete this.form.id
        delete this.form.carnumber
        this.$axios({
          url: this.$settings.base_url + `/user/createcar/?id=${id}`,
          method: 'patch',
          data: this.form
        }).then(res => {
          if (res.data.code === 100) {
            this.$message.success('修改成功')
            this.get_evection(this.curren_page)
            this.form = []
            this.dialogFormVisible = false
          } else {
            this.$message.error('修改失败')
          }
        })
      },
      //点击删除按钮,弹出对话框
      handleDelete (index, row) {
        this.delete_id = row.id
        this.dialogVisible = true
      },
      //点击确定,删除车辆
      delete_car () {
        this.$axios({
          url: this.$settings.base_url + `/user/createcar/?id=${this.delete_id}`,
          method: 'delete'
        }).then(res => {
          if (res.data.code === 100) {
            this.$message.success('删除成功')
            this.get_evection()
            this.delete_id = ''
            this.dialogVisible = false
          } else {
            this.$message.error(res.data.error)
          }
        })

      },

      resetForm (formName) {
        this.$refs[formName].resetFields()
      },
      //获取车辆数据
      get_evection (page = 1) {
        this.$axios({
          url: this.$settings.base_url + `/user/createcar/?page=${page}&type=page`,
          method: 'get'        //type=page表明要获取的时带分页器功能的数据,type=all,代表获取所有的数据
        }).then(res => {
          this.tableData = res.data.results
          this.page_size = res.data.page_size
          this.total = res.data.count
        })
      },
      prevfun (value) {
        //value拿到的当前的页码,不用传递，内置的函数，自动传递要前往的页码
        this.get_evection(value)
      },
      nextfun (value) {
        //value拿到页码
        this.get_evection(value)
      },
      currentchange (value) {
        this.curren_page=value
        this.get_evection(value)

      },
      //

    }
  }
</script>

<style scoped>

</style>
